<template>
    <div class="alertBox" :style="{ top: `${top}px`, 'border-color': color }">
        <i class="fa" :class="clazz" :style="{ color }"></i>
        <span class="alert-text" v-text="message"></span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: '操作成功',
            color: '',
            clazz: '',
            top: -80
        }
    },
    methods: {
        showAlertBox(statusCode, message) {
            this.message = message;
            switch (statusCode) {
                case 0: // 成功
                    this.color = '#28a745';   // 绿色
                    this.clazz = 'fa-check'; 
                    break;
                case 1: // 警告
                    this.color = '#e0a800';
                    this.clazz = 'fa-warning';
                    break;
                case 2: // 错误
                    this.color = '#c82333';
                    this.clazz = 'fa-close';
                    break;
            }
            this.top = 80;
            window.setTimeout(() => {
                this.top = -80;
            }, 1500);
        }
    }
}
</script>

<style scoped>
.alertBox {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    box-sizing: border-box;
    height: 44px;
    padding: 0 20px;
    line-height: 38px;
    z-index: 200;
    border-radius: 22px;
    border: 2px solid;
    transition: 0.5s;
}
.alertBox i {
    margin-right: 5px;
}
</style>